<template>
	<view>
		
	<view class="u-flex-col items-center justify-center group_2" v-if="isMine">
				<view class=" ">
				  <text class="text_1">{{(message.time-currentTime)<60?$u.timeFormat(message.time, 'hh:MM'):$u.timeFormat(message.time, 'mm月dd日  hh:MM')}}</text>
			
				</view>
			
				<view class="u-flex right group_5">
					<view class="flex-col ">
					  <view class="flex-col custom text-wrapper u-p-20 text_3">
					    <view class="u-flex justify-between name u-m-b-20 w-full">
					    	<text>{{ renderDom[0].acceptanceServiceTypeName }}</text>
							<text >{{ renderDom[0].originalOrdersType }}</text>
					    </view>
						<view class="ordersn u-m-b-20">
							<text>订单编号:{{ renderDom[0].ordersNumber }}</text>
						</view>
						<view class="time">
							<text>创建时间:{{ renderDom[0].ordersTime }}</text>
						</view>
					  </view>
					  <text class="text_4">{{message.isPeerRead?'已读':'未读'}}</text>
					</view>
					<image
					  :src="message.avatar?message.avatar:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868227394160305.png'"
					  class="image_1 image_2"
					/>
				</view>
		  
		    </view>
		    <view class="flex-col group_4" v-else >
		      <text class="text_5" >{{(message.time-currentTime)<60?$u.timeFormat(message.time, 'hh:MM'):$u.timeFormat(message.time, 'mm月dd日  hh:MM')}}</text>
		      <view class="flex-row group_5 u-m-l-20">
		        <image
		           :src="message.avatar?message.avatar:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868226658952161.png'"
		          class="image_1"
		        />
		        <view class="flex-col group_6">
		          <text class="text_6">{{message.nick}}</text>
		          <view class="flex-col text-wrapper_1"><text class="text_7">{{message.payload.text}} </text></view>
		        </view>
		      </view>
		     
		    </view>

	</view>
</template>

<script>
	import { formateTime } from '@/static/js/tim/base/common.js';
	export default {
		data() {
			return {
				renderDom:{}
			};
		},
		components: {},
		props: {
			message: {
				type: Object,
				default: () => {}
			},
			isMine: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			message: {
				handler: function(newVal) {
					this.setData({
						message: newVal,
						renderDom: this.parseCustom(newVal)
					});
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			// 解析音视频通话消息
			extractCallingInfoFromMessage(message) {
				const callingmessage = JSON.parse(message.payload.data);
				if (callingmessage.businessID !== 1) {
					return '';
				}
				const objectData = JSON.parse(callingmessage.data);
				switch (callingmessage.actionType) {
					case 1: {
						if (objectData.call_end >= 0 && !callingmessage.groupID) {
							return `通话时长：${formateTime(objectData.call_end)}`;
						}
						if (callingmessage.groupID) {
							return '结束群聊';
						}
						if (objectData.data && objectData.data.cmd === 'switchToAudio') {
							return '切换语音通话';
						}
						if (objectData.data && objectData.data.cmd === 'switchToVideo') {
							return '切换视频通话';
						}
						return '发起通话';
					}
					case 2:
						return '取消通话';
					case 3:
						if (objectData.data && objectData.data.cmd === 'switchToAudio') {
							return '切换语音通话';
						}
						if (objectData.data && objectData.data.cmd === 'switchToVideo') {
							return '切换视频通话';
						}
						return '已接听';
					case 4:
						return '拒绝通话';
					case 5:
						if (objectData.data && objectData.data.cmd === 'switchToAudio') {
							return '切换语音通话';
						}
						if (objectData.data && objectData.data.cmd === 'switchToVideo') {
							return '切换视频通话';
						}
						return '无应答';
					default:
						return '';
				}
			},
			parseCustom(message) {
				// 约定自定义消息的 data 字段作为区分，不解析的不进行展示
				if (message.payload.data === 'order') {
					const extension = JSON.parse(message.payload.extension);
					const renderDom = [
						{
							type: 'order',
							name: 'custom',
							acceptanceServiceTypeName: extension.acceptanceServiceTypeName || '',
							originalOrdersType: extension.originalOrdersType || '',
							ordersNumber: extension.ordersNumber || 0,
							ordersTime: extension.ordersTime ,
						}
					];
					return renderDom;
				} // 客服咨询
	
				if (message.payload.data === 'consultion') {
					const extension = JSON.parse(message.payload.extension);
					const renderDom = [
						{
							type: 'consultion',
							title: extension.title || '',
							item: extension.item || 0,
							description: extension.description
						}
					];
					return renderDom;
				} // 服务评价
	
				if (message.payload.data === 'evaluation') {
					const extension = JSON.parse(message.payload.extension);
					const renderDom = [
						{
							type: 'evaluation',
							title: message.payload.description,
							score: extension.score,
							description: extension.comment
						}
					];
					return renderDom;
				} // 群消息解析
				// 群消息解析
				if (message.payload.data === 'group_create') {
					const renderDom = [
						{
							type: 'group_create',
							text: message.payload.extension
						}
					];
					return renderDom;
				}
				// 音视频通话消息解析
				const callingmessage = JSON.parse(message.payload.data);
	
				if (callingmessage.businessID === 1) {
					if (message.conversationType === 'GROUP') {
						if (message.payload.data.actionType === 5) {
							message.nick = message.payload.data.inviteeList ? message.payload.data.inviteeList.join(',') : message.from;
						}
						const _text = this.extractCallingInfoFromMessage(message);
						const groupText = `${_text}`;
						const renderDom = [
							{
								type: 'groupCalling',
								text: groupText,
								userIDList: []
							}
						];
						return renderDom;
					}
					if (message.conversationType === 'C2C') {
						const c2cText = this.extractCallingInfoFromMessage(message);
						const renderDom = [
							{
								type: 'c2cCalling',
								text: c2cText
							}
						];
						return renderDom;
					}
				}
	
				if (message.payload.data === 'group_create') {
					const renderDom = [
						{
							type: 'group_create',
							text: message.payload.extension
						}
					];
					return renderDom;
				}
	
				return [
					{
						type: 'notSupport',
						text: '[自定义消息]'
					}
				];
			}
		}
	};
	</script>

<style lang="scss">
  .image_1 {
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
  }

 .right{
 	     width: 100%;
 	     display: flex;
 	     justify-content: flex-end;
 	     padding-right: 40rpx; 
 		 margin-top: 20rpx;
 }

  page{
	  background-color: #f2f2f2ff; 
  }
  .page {
    background-color: #f2f2f2ff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
  }
  .group {
    padding-top: 43rpx;
    flex: 1 1 auto;
    overflow-y: auto;
  }

 
  .text_1 {
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_2 {
    margin-left: 10.5rpx;
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_3 {
    width: 461rpx;
  }
  .image_2 {
    margin-left: 23rpx;
  }
  .text_5 {
    align-self: center;
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_5 {
    margin-top: 40rpx;
  }
 

  .text-wrapper {
    padding: 20rpx 0 26rpx;
    background-color: #1d6aff;
    border-radius: 16rpx;
  }
  .text_4 {
    margin-top: 10rpx;
    align-self: flex-end;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_6 {
    margin-left: 24rpx;
  }

 

  .text_3 {
    margin-left: 16rpx;
    margin-right: 26rpx;
    color: #ffffff;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
    text-align: left;
  }
  .text_6 {
    align-self: flex-start;
    color: #666666;
    font-size: 20rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 23rpx;
  }
  .text-wrapper_1 {
    margin-top: 17rpx;
    padding: 18rpx 0 29rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
 .text_7 {
    margin-left: 16rpx;
    margin-right: 15rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }

</style>